<template>
	<el-row class="container">
		<el-row :span="24" class="header">
			<title-info 
				v-bind:showUser="true" 
				v-bind:sysUserName="sysUserName" 
				v-bind:sysUserAvatar="sysUserAvatar"
				:newMessage="newMessage">
			</title-info>
		</el-row>
		
		<el-col :span="24" class="main">
			<div class="side-router">
				<el-scrollbar>
					<side-bar ref="sideBar"></side-bar>
				</el-scrollbar>
			</div>
			<section class="content-container">
				<router-main></router-main>
			</section>
		</el-col>
	</el-row>
</template>

<script>
import {SideBar, RouterMain, TitleInfo } from './components'

import { getEntityListForUser } from '@/api/api';
import { user } from '@/utils/role.js'
import { printLog } from '@/utils/console.js'

export default {
  name: 'Main',
  components: {
    SideBar,
	RouterMain,
	TitleInfo,
  },
  computed: {
    sidebar() {
      return this.$store.getters.sidebar
    }
	},
	data() {
		return {
			sysUserName: '',
			sysUserAvatar: '',
			newMessage:[]
		}
	},
	methods: {
		
	},
	mounted() {
		printLog("---------------home : mounted");
		this.$router.push({ path:'/MonitorList'});
		
	},
	watch: {
		"$store.getters.sessionValid": "sessionStateChanged",
	}
}
</script>

<style scoped lang="scss">
	@import '~scss_vars';

	.container {
		position: absolute;
		top: 0px;
		bottom: 0px;
		width: 100%;
		background-color: #191B24;

		.main {
			display: flex;
			position: absolute;
			top: 60px;
			bottom: 0px;
			overflow: hidden;
			.side-router {
				height: 100%;
				background: linear-gradient(to bottom, #181C25 , #393B42);
			}

			.content-container {
				flex:1;
				height: 100%;
				overflow-y: auto;
			}
			
		}
	}
	
	
</style>
